<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03盒子模型内容的默认值</title>
    <style>
        .box1 {
            background-color: pink;
            /* 
                块级元素默认宽度是交给浏览器决定的
                默认是占据一样
                默认就是 auto 值，也是交给浏览器来决定
            */
            width: auto;
        }

        .box2 {
            background-color: skyblue;
            display: inline-block;
            /* 
                行内元素和行内块元素
                width : auto; 的效果都是由内容撑开

                行内元素不可以设置 width
                行内块可以设置 width
            */
            width: auto;
        }

        .box3 {
            /* 
                行内可替换元素
                可以设置宽高
                width : auto; 的时候 width 大小跟随图片的宽度
            */
            width: auto;
            width: 200px;
        }
    </style>
</head>

<body>
    <div class="box1">我是一个块状元素</div>
    <span class="box2">我是一个span元素</span>
    <img class="box3" src="./images/gouwujie01.jpg" alt="">
</body>

</html>